<template>
  <div class="slide" v-if="SlideshowData.length" @mouseenter="stopSlid" @mouseleave="startSlid" >
    <ul :style="{
      marginLeft: -100 * num + '%',
      width: 100 * (SlideshowData.length + 2) + '%'
    }" :class="{active: isFlag}">
      <li>
        <a :href="SlideshowData[SlideshowData.length - 1].url" target="_blank">
          <img :src="SlideshowData[SlideshowData.length - 1].src" :alt="SlideshowData[SlideshowData.length - 1].title" :title="SlideshowData[SlideshowData.length - 1].title">
        </a>
      </li>
      <li v-for="(item,index) in SlideshowData" :key="index">
        <a :href="item.url" target="_blank">
          <img :src="item.src" :alt="item.title" :title="item.title">
        </a>
      </li>
      <li>
        <a :href="SlideshowData[0].url" target="_blank">
          <img :src="SlideshowData[0].src" :alt="SlideshowData[0].title" :title="SlideshowData[0].title">
        </a>
      </li>
    </ul>
    <div class="slideshow-btn" v-show="btnFlag">
      <svg class="icon icon-xiangzuo" aria-hidden="true" @click="leftBtn">
        <use xlink:href="#icon-xiangzuo"></use>
      </svg>
      <svg class="icon icon-xiangyou" aria-hidden="true" @click="rightBtn">
        <use xlink:href="#icon-xiangyou"></use>
      </svg>
    </div>
    <div class="slide_icon">
      <span @mouseenter="num=item" :class="{active:num==item}" v-for="item in SlideshowData.length" :key="item"></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Slide',

  data() {
    return {
      btnFlag: false, // 是否显示左右按钮
      num: 1, // 当前图片索引
      isFlag: true, // 激活类
      timer: null // 轮播图定时器
    };
  },

  props: {
    SlideshowData: Array
  },

  watch:{
    num(newVal){
      if(newVal == this.SlideshowData.length + 1){
        setTimeout(()=> {
          this.isFlag = false
          this.num = 1
          setTimeout(()=>{
            this.isFlag = true
          },50)
        },300)
      }
      if(newVal == 0){
        setTimeout(()=> {
          this.isFlag = false
          this.num = this.SlideshowData.length
          setTimeout(()=>{
            this.isFlag = true
          },50)
        },300)
      }
    }
  },

  activated(){
    this.startSlid()
  },

  deactivated(){
    clearInterval(this.timer)
  },

  methods: {
    // 向左
    leftBtn(){
      this.num--
    },
    // 向右
    rightBtn(){
      this.num++
    },
    // 鼠标移入暂停定时器
    stopSlid(){
      clearInterval(this.timer)
      this.timer = null
      this.btnFlag = true
    },
    // 开启定时器
    startSlid(){
      this.timer = setInterval(()=>{
        this.rightBtn()
      },3000)
      this.btnFlag = false
    }
  },
};
</script>

<style scoped>
.slide{
  width: 100%;
  height: 400px;
  margin: 10px auto;
  overflow: hidden;
  position: relative;
  border: 1px solid #ececec;
}
.slide ul{
  display: flex;
}
.slide .active{
  transition: all .3s ease;
}
.slide li{
  flex: 1;
}
.slide li img{
  width: 100%;
  height: 400px;
}
.icon-xiangzuo,.icon-xiangyou{
  position: absolute;
  top: 45%;
  font-size: 40px;
  z-index: 999;
  cursor: pointer;
}
.icon-xiangyou{
  right: 30px;  
}
.icon-xiangzuo{
  left: 30px;
}
.slide_icon{
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
}
.slide_icon span{
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #ececec;
  border: 1px solid gray;
  border-radius: 50%;
  margin: 5px;
  cursor: pointer;
}
.slide_icon .active{
  background-color: rgb(21, 255, 0);
}
@media screen and (max-width:468px) {
  .slide,.slide ul{
    height: 200px;
  }
  .slide li img{
    height: 200px;
  }
}
</style>